<template>
  <div>
    <div class="classify_con" ref="mScroll">
      <div class="classify_title">
        <h1>{{finalList.title.title}}</h1>
        <p>{{finalList.title.describe}}</p>
      </div>
      <div class="classify_ad">
        <img v-if="finalList.imageList" @click='jumpEven(finalList.imageList)' v-lazy="finalList.imageList.image"/>
        <!--显示分类商品件数-->
      </div>
      <HomemScroll :goodsList="goodsList">

      </HomemScroll>
    </div>
  </div>
</template>

<script>
  import HomemScroll from "../RegularShowList";
  import {mapMutations} from "vuex";
  import {queryCart, queryGoodsList} from '@/utils/ReturnAxios'

  export default {
    props: {
      page: {
        type: String,
        default: 'classify'
      },
      finalList: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        timer: null,
        domCount: 0,
        targetValue: 0,
        goodsDetailList: []
      }
    },
    components: {
      HomemScroll
    },
    methods: {
      ...mapMutations('xxy', [
        "setpopupVisible",
        "setactivePic",
      ]),
      jumpEven(item) {
        // 弹出活动图
        this.setactivePic(item.activePicture)
        this.setpopupVisible(true)
      },
      setDomCountInterval() {
        this.timer = setInterval(() => {
          if (this.$refs.mScroll && Array.isArray(this.$refs.mScroll)) {
            this.domCount = this.$refs.mScroll.length;
          }
        }, 10);
      },
      //清除用于周期性的获取当前要加载的dom的数量的计时器
      clearDomCountInterval() {
        clearInterval(this.timer);
      },
      //请求商品详情
      /*async queryGoodsDetail (data) {
       var codeList = data.map((item) => {
       return item.goodsNo
       })
       if (codeList.length == 0) {
       return
       }
       //获取编码列表
       var config = {
       goodscodeList: codeList
       }
       //请求详情数据
       var res = await queryGoodsList(config)
       res = res.data
       var detailList = res.data[0]

       this.goodsDetailList = this.goodsList.map((list) => {
       let detail = detailList.find((item) => {
       return list.goodsNo == item.goodscode
       }) || {}
       detail.image = list.image
       return detail
       })
       }*/

    },

    created() {

    },
    mounted() {
      /*this.queryGoodsDetail(this.goodsList)*/
    },
    computed: {
      finalListLength() {
        return this.finalList.length;
      },
      goodsList() {
        var prod = this.finalList.prod
        var goodsList = prod.map((item) => {
          var obj = {
            mainPic: item.publicityPicture,
            goodscode: item.goodsCode,
            ...(item.goodsVO)
          }
          return obj
        })
        return goodsList
      }
    },
    watch: {
      /*goodsList (data) {
       this.queryGoodsDetail(data)
       },*/

      finalListLength(newVal) {
        //				if (newVal > 0) {
        //					this.setDomCountInterval();
        //				}
      },
      domCount(newValue, oldValue) {
        if (newValue === this.finalListLength) {
          //					this.clearDomCountInterval();
          //					console.log("首页dom加载完成， 可以跳到指定scrollTop", newValue);
          //					var node = document.getElementById("scrollOuter")
          //					node.scrollTop = localStorage.getItem('scrollTop')
          //					localStorage.removeItem('scrollTop')
        }
      }
    }
  }
</script>

<style>
  .classify_ad img {
    height: 7rem;
  }
</style>
